/* eslint-disable */
<template>
  <!-- 用户管理页面容器 -->
  <div class="users-container">
    <!-- 页面标题和工具栏 -->
    <div class="page-header">
      <h2>用户管理</h2>
      <!-- 工具栏：包含搜索框和添加用户按钮 -->
      <div class="toolbar">
        <el-input
          v-model="searchQuery"
          placeholder="搜索用户"
          style="width: 200px; margin-right: 10px;">
        </el-input>
        <el-button type="primary" @click="showAddDialog">添加用户</el-button>
      </div>
    </div>

    <!-- 用户列表表格 -->
    <el-table :data="filteredUsers" style="width: 100%">
      <!-- 用户ID列 -->
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <!-- 用户名列 -->
      <el-table-column prop="username" label="用户名" width="120"></el-table-column>
      <!-- 姓名列 -->
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <!-- 角色列 -->
      <el-table-column prop="role" label="角色" width="100">
        <template slot-scope="scope">
          <el-tag :type="getRoleType(scope.row.role)">{{ scope.row.role }}</el-tag>
        </template>
      </el-table-column>
      <!-- 邮箱列 -->
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <!-- 状态列 -->
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="'active'"
            :inactive-value="'inactive'"
            @change="handleStatusChange(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑用户对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialog.visible" width="50%">
      <el-form :model="userForm" :rules="userRules" ref="userForm" label-width="100px">
        <!-- 用户名输入框 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <!-- 姓名输入框 -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <!-- 角色选择框 -->
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" placeholder="请选择角色">
            <el-option label="管理员" value="admin"></el-option>
            <el-option label="教师" value="teacher"></el-option>
            <el-option label="学生" value="student"></el-option>
          </el-select>
        </el-form-item>
        <!-- 邮箱输入框 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"></el-input>
        </el-form-item>
        <!-- 密码输入框：仅在添加用户时显示 -->
        <el-form-item label="密码" prop="password" v-if="dialog.type === 'add'">
          <el-input v-model="userForm.password" type="password"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'UserManagement',
  data() {
    return {
      // 搜索关键词
      searchQuery: '',
      // 用户列表数据
      users: [
        {
          id: 1,
          username: 'admin',
          name: '管理员',
          role: 'admin',
          email: 'admin@example.com',
          status: 'active'
        },
        {
          id: 2,
          username: 'teacher1',
          name: '张老师',
          role: 'teacher',
          email: 'teacher1@example.com',
          status: 'active'
        },
        {
          id: 3,
          username: 'student1',
          name: '李同学',
          role: 'student',
          email: 'student1@example.com',
          status: 'active'
        }
      ],
      // 对话框数据
      dialog: {
        visible: false,
        type: 'add' // 'add' 或 'edit'
      },
      // 用户表单数据
      userForm: {
        username: '',
        name: '',
        role: '',
        email: '',
        password: ''
      },
      // 表单验证规则
      userRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 根据搜索关键词过滤用户列表
    filteredUsers() {
      if (!this.searchQuery) return this.users
      const query = this.searchQuery.toLowerCase()
      return this.users.filter(user => 
        user.username.toLowerCase().includes(query) ||
        user.name.toLowerCase().includes(query) ||
        user.email.toLowerCase().includes(query)
      )
    },
    // 对话框标题
    dialogTitle() {
      return this.dialog.type === 'add' ? '添加用户' : '编辑用户'
    }
  },
  methods: {
    // 显示添加用户对话框
    showAddDialog() {
      this.dialog.type = 'add'
      this.userForm = {
        username: '',
        name: '',
        role: '',
        email: '',
        password: ''
      }
      this.dialog.visible = true
    },
    // 处理编辑用户
    handleEdit(user) {
      this.dialog.type = 'edit'
      this.userForm = { ...user }
      this.dialog.visible = true
    },
    // 处理删除用户
    handleDelete(user) {
      this.$confirm('确认删除该用户吗？', '提示', {
        type: 'warning'
      }).then(() => {
        // TODO: 调用删除用户接口
        this.$message.success('用户删除成功')
      })
    },
    // 处理用户状态变更
    handleStatusChange(user) {
      // TODO: 调用更新用户状态接口
      this.$message.success('用户状态更新成功')
    },
    // 处理表单提交
    handleSubmit() {
      this.$refs.userForm.validate(valid => {
        if (valid) {
          // TODO: 调用添加/编辑用户接口
          this.$message.success(this.dialog.type === 'add' ? '用户添加成功' : '用户更新成功')
          this.dialog.visible = false
        }
      })
    },
    // 获取角色标签类型
    getRoleType(role) {
      const types = {
        admin: 'danger',
        teacher: 'warning',
        student: 'success'
      }
      return types[role] || 'info'
    }
  }
}
</script>

<style scoped>
/* 用户管理页面容器样式：设置内边距 */
.users-container {
  padding: 20px;
}

/* 页面标题和工具栏样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 页面标题样式 */
.page-header h2 {
  margin: 0;
  color: #303133;
}

/* 工具栏样式：设置按钮和搜索框布局 */
.toolbar {
  display: flex;
  align-items: center;
}

/* 表格样式：设置上边距 */
.el-table {
  margin-top: 20px;
}

/* 对话框底部按钮样式 */
.dialog-footer {
  text-align: right;
}
</style> 